<template>
    <div>
        <button @click="()=> a+ 1">a+1</button>
    </div>
</template>

<script>
    export default {
        name: 'Watch',
        data() {
            return {
                a:1,
                b: {c:2,d:3},
                e: {
                    f: {
                        g: 4
                    }
                },
                h: []
            }
        },
        // 在watch中可以操作任何的逻辑 
        watch: {
            a:function(val,oldVal) {
                this.b.c += 1;
            },
            "b.c":function(val,oldVal) {
                this.b.d += 1;
            },
            "b.d":function(val,oldVal) {
                this.e.f.g += 1;
            },
            e: {
                handler:function() {

                },
                deep: true
            }
        }
    }
</script>

<style lang="scss" scoped>

</style>